@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import "tailwindcss";

/* 进度条 */
@import "nprogress/nprogress.css";

/* Element-Plus黑暗模式css */
@import 'element-plus/theme-chalk/dark/css-vars.css';

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
}

#app {
	height: 100%;
}

:root {
	/* 布局 */
	--layout-navbar-height: 60px;

	/* 动画 */
	--animate-duration: 300ms;
	--animate-delay: 0;

	/* 表格	*/
	--el-text-color-secondary: black;

	/* 抽屉body padding值 */
	--drawer-body-padding: 0px;
}

.dark {
	--el-menu-bg-color: #0a0a0a;
	--el-menu-text-color: #e5eaf3;
	--el-menu-hover-bg-color: hsl(216 5% 19%);
	--el-menu-hover-text-color: hsl(0, 0%, 98%);

	--cropper-background: #1f1f1f;
	--cropper-border: #444;
	--cropper-toolbar-bg: rgba(255,255,255,0.12);
	--cropper-text: #eee;
	--cropper-text-muted: #aaa;
}

/* 黑暗模式切换动画css */
.dark::view-transition-old(root) {
	z-index: 100;
}

::view-transition-new(root),
::view-transition-old(root) {
	/* 关闭默认动画，否则影响自定义动画的执行 */
	animation: none;
}

/* 抽屉 body 样式 */
.drawer-body-padding {
	padding: var(--drawer-body-padding) !important;
}

/* 进度条 */
#nprogress .bar {
	background: var(--el-color-primary) !important;
}

/* el-dropdown hover有黑框问题解决 */
.el-tooltip__trigger:focus-visible {
	outline: unset !important;
	cursor: pointer !important;
}

.el-menu-outline-none:focus-within {
	outline: none !important;
}

/* 暗黑模式下menu弹出层样式优化 */
.dark .popper-hover .el-menu-item:hover {
	color: var(--el-menu-hover-text-color) !important;
	background-color: var(--el-menu-hover-bg-color) !important;
}

